<div class="user_container">

    <!-- 添加模态框 -->
  <!-- Button trigger modal -->
  <button type="button" id="btn-default" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    添加
  </button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">添加用户信息</h4>
        </div>
        <div class="modal-body">
          *用户名：<input type="text">
          <br>
          <br>
          *姓&nbsp;&nbsp;&nbsp;&nbsp;名：<input type="text">
          <br>
          <br>
          *密&nbsp;&nbsp;&nbsp;&nbsp;码：<input type="text">
          <br>
          <br>
          *性&nbsp;&nbsp;&nbsp;&nbsp;别：<input type="radio" name="gender" value="男">男&nbsp;<input type="radio" name="gender" value="女">女
          <br>
          <br>
          手机号：<input type="text" id="shoujihao">
          <br>
          <br>
          出生日期：<input type="date">
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary role_queding" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 设置模态框 -->
  <!-- Modal -->
  <div class="modal fade" id="shezhiModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">设置角色</h4>
        </div>
        <div class="modal-body">
          用户名：<input type="text" class="role_shezhi_yonghuming" disabled>
          <br>
          <br>
          角&nbsp;&nbsp;&nbsp;&nbsp;色：<select class="role_shezhi_xialakuang">
                                          <!-- <option class="role_shezhi_val">请选择角色</option> -->
                                        </select>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary role_queding1" data-dismiss="modal">确定</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 顶部添加搜索框 -->
  <div class="row">
  	<!-- <div class="col-md-1">
  		<button class="btn btn-default" type="submit">添加</button>
  	</div> -->
  	<div class="col-md-2 role_shurukuang">
  		 <input type="text" class="form-control user_search_text" id="exampleInputName2" placeholder="请输入用户名">
  	</div>
  	<div class="col-md-2 role_xialakuang">
  		<select class="form-control user_search_text select">
		  <option class="role_val">请选择角色</option>
		</select>
  	</div>
  	<div class="col-md-1 role_sousuo">
  		搜索
  	</div>
  </div>

  <!-- 用户信息表格 -->
  <div class="row role_biaoge">
  	<table class="table table-hover">
	 	<thead>
	 		<th>序号</th>
	 		<th>用户名</th>
	 		<th>姓名</th>
	 		<th>角色</th>
	 		<th>性别</th>
	 		<th>状态</th>
	 		<th>手机号</th>
	 		<th>操作</th>
	 	</thead>
	 	<tbody>
	 			
	 	</tbody>
	</table>
  </div>

  <!-- 底部分页 -->
  <div class="row role_fenyeyangshi">
  	<nav aria-label="Page navigation">
	  <ul class="pagination">
	    <li class="num">
	      <a href="#" aria-label="Previous">
	        <span aria-hidden="true">&laquo;</span>
	      </a>
	    </li>
    	<!-- <li><a href="#">1</a></li>
   		<li><a href="#">2</a></li>
    	<li><a href="#">3</a></li> -->
	    <li>
	      <a href="#" aria-label="Next">
	        <span aria-hidden="true">&raquo;</span>
	      </a>
	    </li>
	  </ul>
	</nav>
  </div>


</div>

<script>
    //声明全局变量
    var baseUrl='http://123.57.30.43:7788/';
    var currentPage=1;
    var pageSize=15;
    var token=sessionStorage.getItem("token");

    //通过promise封装请求函数
    function getData(type,url){
      var p=new Promise((resolve,reject)=>{
        //发送请求
        $.ajax({
          url:url,
          type:type,
          headers:{
            "Authorization":token
          },
          success:function(data){
            resolve(data);
          }
        })
      });
      return p;
    }

    //1.请求角色信息
    getData("get",baseUrl+"role/findAll").then(function(data){
      data.data.forEacph((item)=>{
        $(".user_container .role_val").after('<option>'+item.name+'</option>');
      });
    });

    //封装请求用户函数-处理数据
    function getUserData(url){
        //2.请求所有用户-根据分页
        return getData("get",baseUrl+url).then(function(data){
          //先清空所有分页按钮
          if($(".role_fenye").length>0){
            $(".role_fenye").remove();
          }
          //获取用户总量，设置分页
          var num=Math.ceil((data.data.total)/pageSize);
          for(var i=num;i>0;i--){
            $(".user_container .num").after(`<li class="role_fenye"><a href="#">`+i+`</a></li>`);
          }
          //给分页按钮绑定事件
          $(".role_fenye").click(()=>{
            currentPage=$(event.target).text();
            getUserData("baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize);
          });
          //清空所有tbody元素                                                                                                 
          $(".user_container tbody").empty();
          //根据对象个数创建tr并追加
          data.data.list.forEach((item)=>{
            $(".user_container tbody").append(`
               <tr>
                  <td>`+item.id+`</td>
                  <td>`+item.username+`</td>
                  <td>`+item.realname+`</td>
                  <td>`+item.politicsStatus+`</td>
                  <td>`+item.gender+`</td>
                  <td>`+item.status+`</td>
                  <td>`+item.telephone+`</td>
                  <td>
                    <span class="role_shezhi" data-toggle="modal" data-target="#shezhiModal">设置</span>
                    <span class="role_yichu">移除</span>
                    <span class="role_xiangqing">详情</span>
                    <span class="role_xiugai" data-toggle="modal" data-target="#myModal">修改</span>
                  </td>
                </tr>`);
          });
          //给详情绑定事件
          $('.role_xiangqing').click(function(){
            $('.content-main').load('./pages/user.html')
            //将点击数据存储到本地session中，以便在user.html中获取展示
          });

          //给删除按钮绑定事件
          $('.role_yichu').click(function(){
            var id=$(this).parent().parent().children().eq(0).text();                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
            getData("get",baseUrl+"baseUser/deleteById?id="+id).then(function(){
              if(data.status==200){
                 alert(data.message);
              };
              //刷新页面(重新加载用户信息)
              getUserData("baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize);
            })
          })

          //给修改按钮绑定事件
          $('.role_xiugai').click(function(){
            $('#myModalLabel').text('修改用户信息');
            var id=$(this).parent().parent().children().eq(0).text();
            var username=$(this).parent().parent().children().eq(1).text();
            var realname=$(this).parent().parent().children().eq(2).text();
            var gender=$(this).parent().parent().children().eq(4).text();
            var telephone=$(this).parent().parent().children().eq(6).text();
            var username1=$('input').eq(0).val(username);
            var realname1=$('input').eq(1).val(realname);
            // var gender1=$('input[type="radio"]:checked').val(gender);
            var telephone1 =$('#shoujihao').val(telephone);
            //给确定按钮绑定事件
            $('.role_queding').click(function(){
              var username2=$('input').eq(0).val();
              var realname2=$('input').eq(1).val();
              var gender2=$('input[type="radio"]:checked').val();
              console.log(gender2)
              var telephone2 =$('#shoujihao').val();
              getData('POST',baseUrl+'baseUser/saveOrUpdate?id='+id+'&username='+username2+'&telephone='+telephone2+'&realname='+realname2+'&gender='+gender2).then(function(){
                //清空表格
                $('tbody').empty();
                //请求用户数据
                getUserData("baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize);
              });
            })
          });

          //给设置按钮绑定事件
          $('.role_shezhi').click(function(){
            //获取当前行用户名的值，赋值给输入框
            var username=$(this).parent().parent().children().eq(1).text();
            $('.role_shezhi_yonghuming').val(username);
            //先清空所有下拉选项
            if($(".role_xuanxiang").length>0){
              $(".role_xuanxiang").remove();
            }
            //设置角色下拉框
            getData("get",baseUrl+"role/findAll").then(function(data){
              data.data.forEach((item)=>{
                $(".user_container .role_shezhi_xialakuang").append('<option class="role_xuanxiang">'+item.name+'</option>');
              });
            });
            //获取当前选中值的id
            var id=$(this).parent().parent().children().eq(0).text();
            //获取当前下拉框的内容
            var name='学生';
            //给确定按钮绑定事件
            $('.role_queding1').click(function(){
              getData('POST',baseUrl+'role/saveOrUpdate?id='+id+'&name='+name).then(function(){
                alert(data.message);
                //清空表格
                $('tbody').empty();
                //请求用户信息
                getUserData("baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize);
              });
            })
          });
        });
    }

    //请求用户数据
    getUserData("baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize);

    //给搜索按钮绑定事件
    $(".role_sousuo").click(()=>{
      //1.获取用户输入
      var username=$("input").val();
      var rolename=$(".select").val();
      if(username !='' && rolename=="请选择角色"){
        url="baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize+"&username="+username;
      }else if(username=="" && rolename!='请选择角色'){
        url="baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize+"&rolename="+rolename;
      }else if(username=='' && rolename == "请选择角色"){
        url="baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize;
      }else{
        url="baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize+"&username="+username+"&rolename="+rolename;
      }

      //发送请求
      getUserData(url);	
    });

    //给添加按钮绑定事件
    $('#btn-default').click(function(){
      $('#myModalLabel').text('添加用户信息');
      //给确定按钮绑定事件
      $('.role_queding').click(function(){
        var username=$('input').eq(0).val();
        var realname=$('input').eq(1).val();
        var password=$('input').eq(2).val();
        var gender=$('input[type="radio"]:checked').val();
        var telephone=$('#shoujihao').val();
        // console.log(username,realname,password)
        getData('POST',baseUrl+'baseUser/saveOrUpdate?username='+username+'&password='+password+'&realname='+realname+'&telephone='+telephone+'&gender='+gender).then(function(){
          //清空表格
          $('tbody').empty();
          //请求用户数据
          getUserData("baseUser/pageQuery?page="+currentPage+"&pageSize="+pageSize);
        })        
      }) 
    })
 



    // $(function(){
    //   var currentPage=1;
    //   var pageSize=15; 
    //   //获取token
    //   var token=sessionStorage.getItem('token'); 
    //   //发送请求，封装请求用户信息
    //   function findAllByPage(currentPage,pageSize,username,rolename){
    //           if(username!=null){
    //             url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username;
    //           } else if(rolename!=null){
    //             url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&rolename='+rolename;
    //           }else if(username!=null && rolename!=null){
    //             url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username+'&rolename='+rolename;
    //           }else{
    //             //均为空
    //             url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize;
    //           };
  
    //           $.ajax({
    //             url:url,
    //             type:'GET',
    //             headers:{
    //                 'Authorization':token
    //             },
    //             success:function(data){
    //                 var users=data.data.list;
    //                 data.data.list.forEach(function(item){
    //                     var tr=$(`
    //                         <tr>
    //                             <td>`+item.id+`</td>
    //                             <td>`+item.username+`</td>
    //                             <td>`+item.realname+`</td>
    //                             <td>`+item.politicsStatus+`</td>
    //                             <td>`+item.gender+`</td>
    //                             <td>`+item.status+`</td>
    //                             <td>`+item.telephone+`</td>
    //                             <td>
    //                                 <span class='role_shezhi'>设置</span>
    //                                 <span class='role_yichu'>移除</span>
    //                                 <span class='role_xiangqing'>详情</span>
    //                                 <span class='role_xiugai'>修改</span>
    //                             </td>
    //                         </tr>
    //                     `);
    //                     $('tbody').append(tr);
    //                 });
                
    //               }
    //           });
    //         }; 
    //   $('.container-left li').eq(1).click(function(){
    //     var currentPage=1;
    //         //获取token
    //         var token=sessionStorage.getItem('token');
  
    //         //请求所有用户角色-设置到搜索下拉框中
    //         $.ajax({
    //           url:'http://123.57.30.43:7788/role/findAll',
    //           type:'GET',
    //           headers:{
    //               'Authorization':token
    //           },
    //           success:function(data){
    //             var roles=data.data;
    //             roles.forEach(function(item){
    //               $('.role_val').after(`<option>`+item.name+`</option>`)
    //             })
    //           }
    //         });
  
    //         //查询用户信息
    //         findAllByPage(currentPage,pageSize);
            
  
    //         //根据用户的个数，设置分页按钮个数
    //         $.ajax({
    //           url:'http://123.57.30.43:7788/baseUser/findAll',
    //           type:'GET',
    //           headers:{
    //                 'Authorization':token
    //           },
    //           success:function(data){
    //             var users=data.data;
    //             var num=Math.ceil(users.length/pageSize);
    //             for(var i=num;i>0;i--){
    //               $('.role_fenye').after(`<li class="page-item"><a class="page-link" href="#">`+i+`</a></li>`)
    //             };
    //           }
    //         });
    //     });
  
    //     //设置分页(根据用户点击的当前分页按钮，重新查询当前页面的所有用户)
    //     $('.role_fenyeshezhi').on('click','li',function(event){
    //       //获取token
    //       var token=sessionStorage.getItem('token');
    //       //获取分页的页数
    //       var currentPage=$(this).text();
    //       // console.log(num)
    //       $.ajax({
    //             url:'http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize,
    //             type:'GET',
    //             headers:{
    //                 'Authorization':token
    //             },
    //             success:function(data){
    //                 //删除当前表格
    //                 $('tbody').empty();
    //                 //查找页码对应的表格
    //                 findAllByPage(currentPage,pageSize);           
    //             }
    //       });
    //       //根据用户输入的信息查询用户信息
    //       $('.role_sousuo').click(function(){
    //         //获取用户输入的值
    //         var username=$('input').val();
    //         var rolename=$('.user_search_text').val();
    //         if(username!=null){
    //           url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username;
    //         } else if(rolename!=null){
    //           url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&rolename='+rolename;
    //         }else if(username!=null && rolename!=null){
    //           url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize+'&username='+username+'&rolename='+rolename;
    //         }else{
    //           //均为空
    //           url='http://123.57.30.43:7788/baseUser/pageQuery?page='+currentPage+'&pageSize='+pageSize;
    //         };
    //         //删除当前表格
    //         $('tbody').empty();
    //         $.ajax({
    //           url:url,
    //           type:'GET',
    //           headers:{
    //               'Authorization':token
    //           },
    //           success:function(data){
    //               var users=data.data.list;
    //               data.data.list.forEach(function(item){
    //                   var tr=$(`
    //                       <tr>
    //                           <td>`+item.id+`</td>
    //                           <td>`+item.username+`</td>
    //                           <td>`+item.realname+`</td>
    //                           <td>`+item.politicsStatus+`</td>
    //                           <td>`+item.gender+`</td>
    //                           <td>`+item.status+`</td>
    //                           <td>`+item.telephone+`</td>
    //                           <td>
    //                               <span class='role_shezhi'>设置</span>
    //                               <span class='role_yichu'>移除</span>
    //                               <span class='role_xiangqing'>详情</span>
    //                               <span class='role_xiugai'>修改</span>
    //                           </td>
    //                       </tr>
    //                   `);
    //                   $('tbody').append(tr);
    //               });
              
    //             }
    //         });
    //       });
          
    //     })
    // });
</script>
<style>
	.user_container{
		height: 50px;
		padding:15px;
		color: #666666;
	}
	.role_shurukuang{
    margin-left: 70px;
    margin-top: -36px;
  }
  .role_xialakuang{
    margin-left: -10px;
    margin-top: -36px;
  }
	.user_container .col-md-1,.user_container .col-md-2{
		height: 40px;
		color: #2cb5ac;
	}
	.user_container .role_sousuo:hover{
		cursor: pointer;
	}
  .role_sousuo{
    font-size: 12px;
    margin-top: -26px;
    margin-left: -15px;
  }
	.user_container #btn-default{
		color:#fff;
		background-color: #2cb5ac;
		font-size: 12px;
    /* margin-top: -1290px; */
	}
	.user_container table td span:hover{
		cursor: pointer;
	}
  .role_biaoge{
    font-size: 12px;
  }
  .role_fenyeyangshi{
    margin-top: -42px;
  }
  .role_queding,.role_queding1{
    background-color: #2cb5ac;
  }
  .role_queding,.role_queding1:link{
    background-color: #2cb5ac;
  }
  .role_queding,.role_queding1:visited{
    background-color: #2cb5ac;
  }
  .role_queding,.role_queding1:hover{
    background-color: #2cb5ac;
  }
  .role_queding,.role_queding1:active{
    background-color: #2cb5ac;
  }

</style>